<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM 事件模型</title>
  </head>
  <body>
    <button id="btn1" onclick="handler1(this.innerHTML)">按钮1</button>
    <button id="btn2">按钮2</button>
    <button id="btn3">按钮3</button>
    <button id="btn4">按钮4</button>
    <script>
      function handler1(content) {
        console.log(content);
      }

      const btn2 = document.getElementById("btn2");
      btn2.onclick = handler2;
      function handler2() {
        console.log(this.innerHTML);
      }

      const btn3 = document.getElementById("btn3");
      btn3.addEventListener("click", handler3);
      function handler3(event) {
        //event 事件对象
        console.log(event.target.innerHTML); //target 事件源
      }
      btn3.addEventListener("click", (event) => {
        console.log("other handler");
      });
      btn3.removeEventListener("click", handler3);

      const btn4 = document.getElementById("btn4");
      const handleObject = {
        handleEvent: function (event) {
          console.log(event.target.innerHTML);
        },
      };
      btn4.addEventListener("click", handleObject);
    </script>
  </body>
</html>
